<template>
  <a-card class="task-card" :bordered="false" :bodyStyle="{padding:'0px 10px 10px 10px'}">
    <!-- 查询区域 -->
    <!-- <div class="table-operator"> -->
      <!-- 高级查询区域 -->
      <!-- <j-super-query :fieldList="fieldList" ref="superQueryModal" @handleSuperQuery="handleSuperQuery"></j-super-query> -->
    <!-- </div> -->
    <!-- table区域-begin -->
    <div>
      <vxe-grid
        ref="vxeTable"
        id="TaskTable"
        v-bind="options"
        :columns="getColumns"
        :data="dataSource"
        @checkbox-change="onSelectChange"
        @checkbox-all="onSelectChange"
        @sort-change="onSortChange"
      >
      <template #switch="{row,column}">
        <a-switch :checked="row['formData'][column.property]" :disabled="true" />
      </template>
      <template #uploadImg="{row,column}" >
        <div v-if="Array.isArray(row['formData'][column.property]) && row['formData'][column.property].length > 0" class="j-table-slot-view">
          <img v-for="(item,imgIndex) of row['formData'][column.property]" class="upload-img" :src="item.url" alt=" " :key="imgIndex" :preview="index" v-show="imgIndex===0"/>
        </div>
      </template>
      <template #uploadFile="{row,column}">
        <div v-if="Array.isArray(row['formData'][column.property]) && row['formData'][column.property].length > 0" class="j-table-slot-view">
          <a-button type="primary" icon="download" size="small" ghost @click="downloadRowFile(row['formData'][column.property])">下载</a-button>
        </div>
      </template>
      <template #user="{row, column}">
        <span>{{getRealname(row['formData'][column.property])}}</span>
        <!-- <span>{{JSON.stringify(column)}}</span> -->
      </template>
      <template #dept="{row,column}">
        <span>{{initDepartComponent(row['formData'][column.property])}}</span>
      </template>
      <template #status="{row,column}">
        <span class="status" :class="{yellow:row.status === 1,green:row.status === 2}">{{filterDictTextByCache('bpmn_status', row[column.property])}}</span>
      </template>
      <template #action="{row}">
        <a v-if="row.taskType === 1" @click="handleClick(row)">办理</a>
        <a-divider v-if="row.taskType === 1" type="vertical"/>
        <a v-if="row.taskType === 1" @click="handleEntrustClick(row)">委托</a>
        <a-popconfirm v-if="row.taskType === 0" title="确定拾取任务吗?" @confirm="() => handleClaimTask(row)">
          <a >拾取</a>
        </a-popconfirm>
        <a-divider type="vertical"/>
        <a @click="handleHistory(row)">详情</a>
      </template>
      <template v-slot:pager>
        <vxe-pager
          :layouts="['Sizes', 'PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'FullJump', 'Total']"
          :current-page.sync="ipagination.currentPage"
          :page-size.sync="ipagination.pageSize"
          :total="ipagination.total"
          @page-change="handlePageChange"
        >
        </vxe-pager>
      </template>
    </vxe-grid>
    </div>
    <!-- 任务办理弹窗 -->
    <task-modal ref="taskModal" :type="type" :title="taskTitle" :taskData="taskData" @ok="() => this.loadData(1)"></task-modal>
    <!-- 任务委托弹窗 -->
    <task-entrust-modal ref="taskEntrustModal"  @ok="() => this.loadData(1)"></task-entrust-modal>
  </a-card>
</template>
<script>
import { VxeTableMixin } from '@/mixins/VxeTableMixin'
import { ProcessTableMixins } from './mixins/ProcessTableMixins'
import { claimTask } from '@/api/task'
import taskEntrustModal from '@/views/modules/task/modal/taskEntrustModal'
import { filterDictTextByCache } from '@/components/dict/JDictSelectUtil'
import { mapGetters } from 'vuex'
import taskModal from '@/views/modules/task/modal/TaskModal'
import ColSetting from '@/components/custom/ColSetting'
import JSuperQuery from '@/components/jeecg/JSuperQuery'
export default {
  name: 'TaskTable',
  components: {
    taskEntrustModal,
    taskModal,
    ColSetting,
    JSuperQuery
  },
  mixins: [VxeTableMixin, ProcessTableMixins],
  props: {
    modelId: { // 流程modelId
      type: String,
      default: ''
    }
  },
  data() {
    return {
      fullscreen: false,
      switchFullscreen: true,
      desformApplyVisible: false,
      disabledAll: false, // 表单禁用控制
      taskData: {}, // 流程数据
      disableMixinCreated: true, // 禁止mixin自动加载
      url: {
        list: '/activiti/task/getMyAllTaskList',
        deleteBatch: '/activiti/formData/deleteBatch',
        delete: '/activiti/formData/delete',
        getNewKfdJson: '/activiti/form/getFormDeploymentByModelId' // 自定义表单查询
      },
      taskTitle: '',
      rootUrLReplace: '/TaskList/', // 根据这个截取url参数
      expandColums: [
        { title: '当前节点', align: 'center', field: 'name', showOverflow: true }
      ],
      seriaColumns: [
        { type: 'seq', width: 60 }
      ],
      type: 'history_his',
      hasNodeName: true
    }
  },
  methods: {
    ...mapGetters(['userInfo']),
    filterDictTextByCache: filterDictTextByCache,
    getQueryParams() {
      return {
        type: 1,
        pageNo: this.ipagination.currentPage,
        pageSize: this.ipagination.pageSize
      }
    },
    handleClick(data) { // 办理
      this.taskData = data
      this.type = ''
      this.taskTitle = '【' + data.modelName + '】流程办理'
      this.$refs.taskModal.editModalVisible = true
    },
    handleEntrustClick(data) { // 委托
      this.$refs.taskEntrustModal.show(data.id)
    },
    // taskEntrust(data) { // 委托保存
    //   if (!data) {
    //     this.$message.error('请先选择委托人')
    //     return false
    //   }
    //   entrustTask({ taskId: this.taskData.id, userId: data }).then((res) => {
    //     if (res.success) {
    //       this.$message.success('流程委托成功')
    //       this.loadData()
    //       this.$refs.taskEntrustModal.modalVisible = false
    //     } else {
    //       this.$message.error(res.message)
    //     }
    //   })
    // },
    handleClaimTask(record) { // 拾取流程
      claimTask({
        taskId: record.id
      }).then(res => {
        if (res.success) {
          this.loadData()
          this.$message.success(res.message)
        } else {
          this.$message.error(res.message)
        }
      })
    },
    handleHistory(data) { // 查看详情
      this.taskData = data
      this.type = 'history_his'
      this.$refs.taskModal.editModalVisible = true
    }
    // completeTaskSubmit(data, appendFormData) { // 流程审批
    //   completeTask({
    //     comment: data.reason,
    //     taskId: this.taskData.id,
    //     procInstId: this.taskData.processInstanceId,
    //     formDataId: this.taskData.formDataId,
    //     usernames: data.ccUserRealNames,
    //     flag: data.flag,
    //     appendFormId: this.taskData.appendForm && this.taskData.appendForm.id,
    //     formData: this.taskData.appendForm && JSON.stringify(appendFormData),
    //     appendFormDataId: data.appendFormDataId,
    //     nodeId: data.nodeId,
    //     files: data.files
    //   }).then(res => {
    //     if (res.success) {
    //       this.$message.success('流程办理成功')
    //       this.loadData()
    //       this.$refs.taskModal.editModalVisible = false
    //     } else {
    //       this.$message.error(res.message)
    //     }
    //   }).catch((error) => {
    //     console.log(error)
    //   })
    // }
    // tabChange() {

    // }
  }
}
</script>
<style>
  .task-card{
    padding-top:10px;
  }
</style>
<style lang="less" scoped>
@import '~@assets/less/common.less';
  .j-table-slot-view{
    font-size: 12px;
    font-style: italic;
    .upload-img {
      max-width: 80px;
      max-height: 18px;
    }
  }
  .j-table-slot-view img {
    max-width: 80px;
    max-height: 25px;
  }
  .clearfix:after{
    content:"";
    display:block;
    visibility:hidden;
    clear:both;
  }
  .ant-card-body .table-operator{
    margin-bottom: 0px;
  }

</style>
